<template>
  <div class="box">
    <header class="header">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @update:model-value="onUpdate"
      >
      <template #left>

         <van-icon name="arrow-left" size="20" @click="$router.go(-1)"  />

        </template>
        <template #action>
          <van-button type="danger" @click="onSearch">搜索</van-button>
        </template>
      </van-search>
    </header>
    <main class="content">
      <van-skeleton v-if="list.length==0">
        <template #template>
          <div :style="{ display: 'flex', width: '100%' }">
            <van-skeleton-image />
            <div :style="{ flex: 1, marginLeft: '16px' }">
              <van-skeleton-paragraph row-width="60%" />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
            </div>
          </div>
        </template>
      </van-skeleton>
      <div v-else v-for="item in list" :key="item.id">
        <van-card
          
          :price="item.price"
          
          :title="item.title"
          :thumb="item.image"
        />
      </div>
    </main>
  </div>
</template>

<script setup>
import {onMounted,ref} from 'vue'
import request from '@/utils/request'
import shake from '@/utils/shake'
const value =ref('')
const list=ref([])
const query =()=>{
    request.get('/search',{
        params:{
          value:value.value
        }
    }).then(res=>{
        if(res.data.code==200){
            list.value=res.data.data
        }
    })
}

onMounted(()=>{
    query()
})

const onSearch=()=>{
    query()
}
const onUpdate=shake(()=>{
    query()
},1000)

</script>